<template>
  <div ref="container" id="popup" class="ol-popup" v-show="isToggle">
    <a
      href="javascript:void(0)"
      @click="closePopup"
      class="ol-popup-closer"
    ></a>
    <div id="popup-content">
      <div class="monitorId">摄像头：{{ content.编号 }}</div>
      <div class="monitoInfo">
        <table>
          <tr>
            <td>位置</td>
            <td>{{ content.位置 }}</td>
          </tr>
          <tr>
            <td colspan="2">
              <img src="@/assets/images/car.gif" alt="" />
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Query } from '@/api/mapgis-api/Query'
import { onMounted, getCurrentInstance, ref, watch } from 'vue'
import { createPopup } from '@/api/ol-api/popup'
import monitor from '@/assets/images/monitoring.png'
const { proxy } = getCurrentInstance()

// 接收父组件的值，控制弹窗的显示
const props = defineProps({
  isToggle: {
    type: Boolean,
  },
})

const monitorData = ref(null) //转换后的mapgis数据
const container = ref('')
const content = ref('') //存放监控数据
let popup = null

let service = {
  docName: import.meta.env.VITE_MAPGIS_DOC_NAME,
  layerId: 3,
}

onMounted(() => {
  // 获取mapgis中的摄像头数据，转换为ol数据，并添加到地图上
  Query.queryByLayerId(service).then((features) => {
    monitorData.value = new ol.format.GeoJSON().writeFeaturesObject(features)
    const map = proxy.$map

    const source_monitor = new ol.source.Vector({
      features: new ol.format.GeoJSON().readFeatures(monitorData.value),
    })

    const layer_monitor = new ol.layer.Vector({
      source: source_monitor,
      style: setMonitorStyle(monitor),
    })

    // 隐藏监控图层
    layer_monitor.setVisible(false)
    watch(
      () => props.isToggle,
      (val) => {
        layer_monitor.setVisible(val)
      }
    )

    map.addLayer(layer_monitor)
    // 设置弹窗
    popup = createPopup({
      container: container.value,
      map,
    })

    //为map添加鼠标移动事件监听,当鼠标移动到元素上的时候会显示手型
    map.on('pointermove', function (e) {
      var pixel = map.getEventPixel(e.originalEvent)
      var hit = map.hasFeatureAtPixel(pixel)
      map.getTargetElement().style.cursor = hit ? 'pointer' : ''
    })

    // 为map添加点击事件监听，渲染弹出popup
    map.on('click', function (e) {
      // 获取当前点击的点是否存在要素, 并返回
      const feature = map.forEachFeatureAtPixel(
        e.pixel,
        function (feature, layer) {
          // 判断一下
          if (layer === layer_monitor) {
            return feature
          }
        }
      )
      if (feature) {
        /* 让弹窗显示 */
        let center = e.coordinate
        content.value = feature.values_.values_
        popup.setPosition(center)
      }
    })
  })
})
// 设置监控图层样式
function setMonitorStyle(url) {
  return new ol.style.Style({
    /**{olx.style.IconOptions}类型*/
    image: new ol.style.Icon({
      anchor: [0.5, 100],
      anchorOrigin: 'center',
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      offsetOrigin: 'center',
      //图标缩放比例
      scale: 0.15,
      //透明度
      opacity: 1,
      //图标的url
      src: url,
    }),
  })
}
// 关闭弹窗
function closePopup() {
  popup.setPosition(null)
}
</script>

<style lang="scss" scoped>
.ol-popup {
  box-sizing: border-box;
  position: absolute;
  width: 250px;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  /* padding: 15px; */
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 100px;
  z-index: 10000;
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 50%;
  transform: translateX(-50%);
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}

.ol-popup-closer:after {
  content: '✖';
}

#popup-content {
  font-size: 14px;
  font-family: '微软雅黑';
  .monitorId {
    height: 30px;
    background-color: #2196f3;
    color: white;
    line-height: 30px;
    border-radius: 5px 5px 0 0;
    padding: 0 5px;
  }
  .monitoInfo {
    padding: 5px;
    table {
      width: 100%;
      border-collapse: collapse;
      tr {
        height: 30px;
        border: 1px solid #ccc;
      }
      td {
        height: 30px;
        border: 1px solid #ccc;
        padding: 5px 5px 0 5px;
        text-align: center;
        line-height: 30px;
      }
      img {
        width: 100%;
        height: 120px;
        margin-top: 5px;
      }
    }
  }
}

#popup-content .markerInfo {
  font-weight: bold;
}
</style>
